import React, { Component } from 'react'
import { Row, Col, Pagination, Skeleton } from 'antd'
import '../../../less/index.less'
import { Link, withRouter } from 'react-router-dom'
import { TwsProgressCard } from 'tws-antd'
import { connect } from 'react-redux'
import HorizontalMenu from '../../common/menu/horizontal-menu'
import * as programActions from '../../../actions/program'
import { FormattedMessage } from 'react-intl'
import {getLangFromLocalStorage} from '../../../constant/lang-util'

class ProgramList extends Component {

  state = {
    page : 1,
    pageSize : 8,
    loading: true
  }
  componentDidMount () {
    this.props.getMyProgramList(this.state.page,this.state.pageSize, () => {
      this.setState({ loading: false })
    })
  }

  goProgram (programId) {
    return '/program/' + programId + '/introduction'
  }

  onChangePage = (page) => {
    this.setState({page})
    this.props.getMyProgramList(page,this.state.pageSize)
  }

  getDefaultSkeleton () {

    return [1,2,3,4].map((item) => <Col className='gutter-row row-margin' span={6} key={item}>
      <Skeleton paragraph={{ rows: 5,width:[250,250,250,250,120]}} title={false}><p/></Skeleton>
    </Col>)
  }

  render () {
    const {content,totalElements}  = this.props.programList
    const {page, pageSize, loading} = this.state
    return (
      <div>
        <HorizontalMenu />
        {loading ? <Row gutter={16} className='margin-t-4 pointer'>
          {this.getDefaultSkeleton()}
        </Row>
        :<Row gutter={16} className='margin-t-4 pointer'>
          {content.map((programInfo, index) => {
            const length = programInfo.totalTasksCount
            const program = programInfo.program
            const title = program[`title_${getLangFromLocalStorage()}`] || program.title
            let finishedTasksLength = programInfo.finishedTasksCount
            const programUrl = this.goProgram(program.id)

            return (<Col className='gutter-row row-margin' span={6} key={index}>
              <Link to={programUrl}>
                <TwsProgressCard
                  title={title}
                  percent={Number.parseFloat(parseFloat(((finishedTasksLength / (length === 0 ? 1 : length)) * 100)).toFixed(2))}
                >
                  <p><FormattedMessage id='共有学习任务' />: {length}<FormattedMessage id='个' /></p>
                  <p><FormattedMessage id='已经完成' />: {finishedTasksLength}<FormattedMessage id='个' /></p>
                </TwsProgressCard>
              </Link>
            </Col>)
          })}
        </Row>
        }
        { totalElements > 0
          ?<Pagination
            defaultCurrent={page}
            total={totalElements}
            pageSize={pageSize}
            current={ page}
            onChange={this.onChangePage}/>
          : ''
        }

      </div>
    )
  }
}

const mapStateToProps = state => ({
  programList: state.myProgramList
})
const mapDispatchToProps = dispatch => ({
  getMyProgramList: (page, pageSize, callback) => dispatch(programActions.getMyPrograms(page, pageSize, callback))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ProgramList))
